<template>
  <div ref="chart">
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'Cpu',
    data() {
      return {
        data: [],
        xAxisData: [],
        option: {
          title: {
            text: '温/湿度状态'
          },
          color: ['#5793f3', '#d14a61', '#675bba'],
          legend: {
            data: ['湿度', '温度']
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          }, grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: (function () {
              var now = new Date();
              var res = [];
              var len = 10;
              while (len--) {
                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                now = new Date(now - 10*1000);
              }
              return res;
            })()
          },
          yAxis: [{
            type: 'value',
            min: 0,
            max: 250,
            name:'湿度',
            axisLine: {
              lineStyle: {
                color: '#5793f3'
              }
            },
            axisLabel: {
              formatter: '{value} ml'
            }
          },{
            type: 'value',
            min: 0,
            max: 50,
            name:'温度',
            axisLine: {
              lineStyle: {
                color: '#5793f3'
              }
            },
            axisLabel: {
              formatter: '{value} ℃'
            }
          }],
          series: [
            {
              name: '湿度',
              type: 'bar',
              data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(Math.round(Math.random() * 10)+100);
                }
                return res;
              })()
            },{
              name: '温度',
              type: 'bar',
              yAxisIndex: 1,
              data: (function () {
                var res = [];
                var len = 10;
                while (len--) {
                  res.push(Math.round(Math.random() * 5)+25);
                }
                return res;
              })()
            }
          ]
        }
      }
        ;
    },
    mounted() {
      this.chart = echarts.init(this.$refs['chart']);
      this.chart.setOption(this.option, true);
      var chart = this.chart;
      var one = this.option;
      setInterval(function () {
        let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
        let data0 = one.series[0].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 10)+100);
        one.xAxis.data.shift();
        one.xAxis.data.push(axisData);
        chart.setOption(one);
      }, 5*1000);
    }
  };
</script>

<style scoped>
  .m-map {
    width: 100%;
    height: 100%;
  }
</style>
